<template>
  <div>
    <Vheader title="找回密码"></Vheader>
    <div class="forget-container">
      <div class="input-box">
        <label class="input-label">手机号:</label>
        <input type="number" class="input" placeholder="请输入当前手机号" v-model="loginName">
      </div>
      <div class="input-box">
        <label class="input-label">验证码:</label><input type="text" v-model="code" class="input flex8"
                                                      placeholder="请输入手机验证码"/>
        <button class="Vcode" @click="getCode(60)" :disabled="disabled || time > 0" :style="{backgroundColor:bgColor}">
          {{text}}
        </button>
      </div>
      <div class="input-box">
        <label class="input-label">新密码:</label>
        <input type="password" class="input" placeholder="请再次输入新密码" v-model="password">
      </div>
      <mt-button @click.native="forgetSubmit" type="primary" class="exit">确认</mt-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../components/header.vue';
  import axios from '../axios/axios'
  import {Toast} from 'mint-ui'
  export default {
    data() {
      return {
        disabled: false,
        time: 0,
        password: '',
        loginName: '',
        code: ''
      };
    },
    computed: {
      text: function () {
        return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
      },
      bgColor: function () {
        return this.time > 0 ? '#a9a9a9' : '#f04022';
      }
    },
    methods: {
      getCode(time) {
        if (this.loginName !== '' && this.loginName.length === 11) {
          this.disabled = true;
          this.time = time;
          this.timer();
          var codeData = JSON.stringify({
            'data': [this.loginName, 'retrieve'
            ],
            'controllerName': 'smsMessage',
            'actionName': 'sendSmsMessage'
          });
          axios.postAdmain({
            data:codeData,
            callback(response){
              console.log(JSON.stringify(response.data));
              if (response.data.data.result === true) {
                Toast(response.data.data.remark);
              } else {
                Toast(response.data.data.data);
              }
            }
          })
        } else {
          Toast('请输入正确的手机号码');
        }
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          setTimeout(this.timer, 1000);
        }
      },
      forgetSubmit() {
//          验证手机验证码
        var that=this;
        var codeData = JSON.stringify({
          'data': [this.loginName, this.code, 'retrieve'],
          'controllerName': 'smsMessage',
          'actionName': 'validate'
        });
        var forgetData = JSON.stringify({
          'data': [{
            'password': this.password,
            'loginName': this.loginName
          }],
          'controllerName': 'userInfo',
          'actionName': 'retrieve'
        });
        if (this.code === '' || this.code.length < 4) {
          Toast('验证码不能为空或者长度不小于四位');
          return;
        }
        axios.postAdmain({
          data:codeData,
          callback(response){
            console.log('验证短信' + JSON.stringify(response.data));
            axios.postAdmain({
              data:forgetData,
              callback(res){
                if (res.data.data.result === true) {
//                  Toast(res.data.data.remark);
                  that.$router.push('/login');
                } else {
                  Toast(res.data.data.remark);
                }
              }
            })
          }
        })
      }
    },
    components: {
      Vheader
    }
  };
</script>

<style type="text/scss" lang="scss">
  @import "../common/style/public";
  .forget-container {
    width: 100%;
    position: absolute;
    top: 44px;
    padding-top: 5px;
    .Vcode {
      position: absolute;
      right: 3%;
      padding: 5px;
      margin-top: 5px;
      color: #FFFFFF;
      font-size: 16px;
      border-radius: 5px;
      border: none;
      outline: none;
    }
  }
</style>
